<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-L-admin1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-upload-img{
            max-width: 200px;
            margin-left: 110px;
        }
        .mask{
          display: none;
          position: fixed;
          left: 0;
          top:0;
          width: 100vw;
          height: 100vh;
          background: rgba(0,0,0,0.4);
          z-index: 100;
        }
        .sku-key{
          display: none;
          background-color: aliceblue;
          z-index: 101;
          width:400px;
          height:150px;
          display: block;
          position: absolute;
          left: 50%;
          top:50%;
          margin-top:-75px;
          margin-left:-200px;
        }
        .sku-key .layui-form-label {
          margin: 20px 0px;
        }
        .sku-key .layui-input-inline{
          margin: 20px 0px;
        }
        .sku-key .layui-form-item{
          
        }
        .sku-table{
          min-width: 600px;
          min-height: 100px;
        }
        .sku-table thead,tbody,tfoot,tr,th,td{
          padding:0px;
          margin: 0px;
        }
        .sku-table thead tr{
          border-bottom: 1px solid #000;
        }
        .sku-table thead th{
          width: 200px;
          height:30px;
          line-height: 30px;
        }
        .sku-table tbody tr{
          border-bottom: 1px solid #000;
        }
        .sku-table tbody tr td{
          width: 200px;
          text-decoration: 2em;
          font-size: 16px;
          color: #666;
          text-align: center;
        }
        .sku-table tbody tr td a{
          display: block;
          min-height: 50px;
          width: 100%; /* 宽度设置为100%，以填满父元素 */  
          height: 100%; /* 高度设置为100%，以填满父元素 */ 
        }
        .sku-table tbody tr td img{
            width: auto;
            max-height: 50px;
        }
        .sku-table tfoot{
          text-align: right;
        }
        .sku-key-title-list{
          width: 440px;
          margin-bottom: 20px;
        }
        .sku-key-title-list div{
          display: inline-block;
          padding: 10px 5px;
          margin-left: 10px;
          
        }
        .sku-key-title-list-key{
          border-bottom: 1px solid #000;
        }
        .sku-key-title-list-value div{

        }
        .sku-key-title-list-option{
          border-bottom: 1px solid #000;
        }
        .add-btn{
          float: right;
          background-color: #6adceb;
          color: #fff;
          font-size: 20px;
          text-align: center;
          height: 15px;
          line-height: 15px;
          border-radius: 15px;
          padding :15px
        }
        .add-btn:hover{
          font-size: 22px;
          background-color: #15ff00;
          color: #fff;
        }
        table caption{
          height: 35px;
          line-height: 35px;
          font-size: 22px;
        }
    </style>
  </head>
  
  <body>
    <div class="x-body">
        <div class="layui-form">
          <input type="text" id="id" name="id" value="{$info.id}" style="display: none;">
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>账号
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="username" name="username" required lay-verify="required"
                  autocomplete="off" class="layui-input" value="{$info.username|default=''}" disabled>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="realname" class="layui-form-label">
                  昵称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="realname" name="realname" required lay-verify="required"
                  autocomplete="off" class="layui-input" value="{$info.realname|default=''}">
              </div>
          </div>
          <!-- <div class="layui-form-item">
            <label for="amount" class="layui-form-label">
                余额
            </label>
            <div class="layui-input-inline">
                <input type="number" id="amount" name="amount" required lay-verify="required"
                autocomplete="off" class="layui-input" value="{$info.amount|default=''}">
            </div>
          </div> -->
          <div class="layui-form-item">
            <label for="price_ratio" class="layui-form-label">
                价格系数
            </label>
            <div class="layui-input-inline">
                <input type="number" id="price_ratio" name="price_ratio" required lay-verify="required"
                autocomplete="off" class="layui-input" value="{$info.price_ratio|default=''}">
            </div>
          </div>
          <div class="layui-form-item">
              <label for="end_time" class="layui-form-label">
                  结束时间
              </label>
              <div class="layui-input-inline">
                <input type="date" class="layui-input" id="end_time" value="{$info.end_time|default=''}">
              </div>
          </div>
          <div class="layui-form-item">
            <label for="classify_id" class="layui-form-label">
                <span class="x-red">*</span>状态
            </label>
            <div class="layui-input-inline">
                <select id="status" name="status">
                    {volist name="select" id="value"}
                    <option value="{$key}">{$value}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <!-- <div  class="layui-form-item" style="width: 100%;">
            <table id="myTable" class="layui-table">  
                <caption>关键词列表</caption>
                <thead>
                    <tr>  
                        <th>关键词</th>  
                        <th>价格</th>  
                        <th>结束时间</th>  
                        <th>操作</th>  
                    </tr>  
                </thead>
                <tbody id="keyword-tbody">
                    {volist name="keywords" id="value" key="key"}
                        <tr id="row{$key}">
                            <td><input name="keyword" value="{$value.keyword}"></td> 
                            <td><input name="price" value="{$value.price}"></td>
                            <td><input name="end_time" value="{$value.end_time}"></td> 
                            <td><a href="javascript:javascript:hideRow({$key});">删除</a></td>
                        </tr>
                    {/volist}
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="5">
                      <a class="add-btn" href="javascript:addRow();">添加行</a>  
                    </td>
                  </tr>
                </tfoot>
            </table>  
        </div> -->
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="add" lay-submit="">
                确认
            </button>
        </div>
      </div>
</div>
    <script>
      layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        
          //监听提交
          form.on('submit(add)', function(data){
            let //keywords = [],
                // keyword = document.getElementsByName('keyword'),
                realname = document.getElementById('realname').value,
                // amount = document.getElementById('amount').value,
                price_ratio = document.getElementById('price_ratio').value,
                end_time = document.getElementById('end_time').value,
                status = document.getElementById('status').value;
            let message = {
              realname:realname,
              // amount:amount,
              price_ratio:price_ratio,
              end_time:end_time,
              status:status
            };
            console.log(message);
            //发异步，把数据提交给php
            $.ajax({
                url: '/admin/user/save?id={$info->id}', // 你的 PHP 脚本的 URL  
                type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
                dataType: 'json', // 预期服务器返回的数据类型  
                data: message,
                success: function(res) { 
                    layer.alert("增加成功", {icon: 6},function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                        parent.location.reload();
                    });
                }
            });
            return false;
          });
        });
        function addRow(){
          let tbody = document.getElementById('keyword-tbody'),
              trs = tbody.getElementsByTagName('tr'),
              string = '<td><input name="keyword"></td><td><input name="price"></td><td><input name="end_time"></td>';
          tr = document.createElement('tr');
          tr.id = 'row' + (trs.length + 1);
          tr.innerHTML = string + '<td><a href="javascript:javascript:hideRow(' + (trs.length + 1) + ');">删除</a></td>';
          tbody.appendChild(tr);
        }
        function hideRow(id){
          let tr = document.getElementById('row' + id);
          tr.style = 'display:none';
          tr.innerHTML = '';
        }
    </script>
  </body>
</html>